<template>
  <div ref="root">
    <div class="fullscreen-wrapper">Content</div>
    <button type="button" @click="toggle">Fullscreen</button>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, toRefs, reactive } from 'vue';
import { api as fullscreen } from 'vue-fullscreen';
export default defineComponent({
	setup() {
		const root = ref();
		const state = reactive({
			'fullscreen': false,
			'teleport': true
		});

		async function toggle() {
			await fullscreen.toggle(root.value.querySelector('.fullscreen-wrapper'), {
				'teleport': state.teleport,
				'callback': (isFullscreen) => {
					state.fullscreen = isFullscreen
				}
			});
			state.fullscreen = fullscreen.isFullscreen;
		}

		return {
			root,
			...toRefs(state),
			toggle
		};
	}
});
</script>
